<script setup>
import { ref, onMounted, reactive } from "vue"
import { Toast } from "vant"
import { getLocal } from "../../utils/utils"
import { getfocus } from '../../service/home'
import swiper from "../../assets/imgs/home/swiper.jpg"
import exchange from "../../assets/imgs/home/exchange_icon.png"
import Recommended from "../../assets/imgs/home/recommended_icon.png"
import Ranking from "../../assets/imgs/home/ranking_icon.png"
import bookTips from "../../assets/imgs/home/learning_icon.png"


const navList = [
  // 去发布技能交友，互相学习， （发布技能后，申请制）
  {
    id: 1,
    title: "技能交换",
    to: "/skillsShare",
    icon: exchange
  },
  // 相关的技能文章分享，（有各种分类，绘画，音乐，计算机之类的文章学习资料等等的分享）
  {
    id: 2,
    title: "相互监督",
    // to: "/articleRecommended",
    to: "/supervision",
    icon: Recommended
  },
  // 当前绘画，音乐，计算机之类书籍排名跟推荐
  {
    id: 3,
    title: "学习路线",
    // to: "/topRanking",
    to: "/LearningPath",
    icon: Ranking
  },
  // 可以发布记录自己的学习过程分享
  {
    id: 4,
    title: "学习分享",
    // to: "/bookTips",
    to: "/bookTips",
    icon: bookTips
  },
];
const tabList = [
  {
    id: 1,
    title: "推荐",
  },
  {
    id: 2,
    title: "计算机",
  },
  {
    id: 3,
    title: "美术",
  },
  {
    id: 4,
    title: "写作",
  },
  {
    id: 5,
    title: "音乐",
  },
  {
    id: 6,
    title: "其他",
  },
];
 
const swiperImg = ref(swiper);
const active = ref(0);
const onClickTab = ({ title }) => {
  Toast(title);
};
const focusOn = () => {
  Toast("关注成功");
}
// 关注列表
const focusTab = reactive({
  book:{
    name:"读书",
    status:0
  },
  comp:{
    name:"计算机",
    status:1
  },
  draw:{
    name:"画画",
    status:0
  },
  music:{
    name:"音乐",
    status:0
  },
  write:{
    name:"写作",
    status:1
  },
  other:{
    name:"其他",
    status:0
  }
})
const getfocusTab = async () => {
  let token = getLocal("token")
  if(token) {
     const { data } = await getfocus({
      username: "msf666",
    })
    if(data.code == 200){
      for(let key in data.message[0]){
        console.log(key,focusTab[key], "key")
        // focusTab[key].status =  data.message[0][key]
      }
    }
  }
}
onMounted( () => {
  getfocusTab()
})
</script>

<template>
  <div class="home">
    <!-- 标题 -->
    <van-nav-bar>
      <template #left>
        <h2 class="home_title">推荐</h2>
      </template>
    </van-nav-bar>

    <!-- 首页轮播图 -->
    <div class="home_swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in 5">
          <img :src="swiperImg" />
        </van-swipe-item>
      </van-swipe>
    </div>


    <!-- 功能按钮 -->
    <div class="nav_list">
      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="value in navList" :key="value.id" :icon="value.icon" :text="value.title" :to="value.to" />
      </van-grid>
    </div>

    <!-- 打卡 -->
    <div class="day_Sign">
      <div class="conmmon-title">
        <i></i>
        <h5>推荐学习</h5>
      </div>
      <!-- 推荐学习的标签 -->
      <ul class="learn_list">
        <li v-for="(item, index) in focusTab" :key="index">
          <div class="learn_list_content">
            <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="">
            <p>{{ item.name }}</p>
            <span @click="focusOn" :class="[{onFocusStatus: item.status}]">{{ item.status == 0 ? '关注' : "已关注"}}</span>
            <!-- <van-button round type="primary">关注</van-button> -->
          </div>
        </li>
      </ul>
    </div>

    <!-- 广播文字 -->
    <van-notice-bar :scrollable="true" text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。" />

    <!-- 热门分享 -->
    <div class="hot_share">
      <div class="conmmon-title">
        <i></i>
        <h5>热门文章</h5>
      </div>
      <van-tabs v-model:active="active" @click-tab="onClickTab" sticky>
        <van-tab v-for="(item, index) in tabList" :key="index" :title="item.title">
          <ul class="hot_article_list">
            <li class="hot_article_info" v-for="(intem,index) in 10" :key="index">
              <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="hot_article_avater" />
              <div class="hot_article_txt">
                <h5>吉他分享画画有吗</h5>
                <p>我会吉他，求分享一个画画的老师，在线等！！</p>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {

  // padding: 0 0.4688rem;
  :deep(.van-tabs__line) {
    background-color: #ffbb01;
  }

  :deep(.my-swipe) {
    margin-top: 0.4688rem;
    width: 100%;
  }

  :deep(.van-grid-item__content) {
    background: none;
  }
  :deep(.van-swipe-item) {
    text-align: center;
  }

  :deep(.van-swipe__track) {
    // padding: 0 0.4688rem;
    width: 100% !important;
    img {
      width: 10.7813rem;
      height: 4.25rem;
      border-radius: 0.3125rem;
      object-fit: cover;
      
    }
  }
  .onFocusStatus{
    background-color: #d5d5d5 !important;
  }
  .home_title {
    height: 90%;
    line-height: 46px;
    border-bottom: 3px solid #fedd2b;
  }
  .home_swiper {
    // width: 10.7813rem;
    // margin-left: 0.4688rem;
    // box-sizing: border-box;
    // overflow: hidden;
  }
  .nav_list {
    margin-top: 0.25rem;
    box-sizing: border-box;
  }

  .conmmon-title {
    display: flex;
    margin-left: 0.4688rem;
    margin-bottom: .2rem;

    i {
      margin-top: 0.1563rem;
      display: block;
      width: 0.1563rem;
      height: 0.6375rem;
      background-color: #fedd2b;
    }

    h5 {
      margin-left: 0.25rem;
      font-size: 0.5625rem;
      line-height: 0.9375rem;
    }
  }

  .day_Sign {
    margin-bottom: 0.4688rem;

    .learn_list {
      display: flex;
      margin: 0 .4688rem;
      margin-top: .375rem;
      height: 3.6rem;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;

      .learn_list_content {
        display: inline-block;
        margin-right: .375rem;
        height: 3.475rem;
        width: 2.5625rem;
        text-align: center;
        background-color: #fff;
        border-radius: .3125rem;

        img {
          width: 2.5rem;
          height: 1.5rem;
          border-radius: .3125rem .3125rem 0 0;
        }

        p {
          margin: 0;
          text-align: center;
          font-size: .4688rem;
        }

        span {
          margin-left: .5rem;
          margin-top: .1563rem;
          display: block;
          width: 1.5rem;
          height: .8rem;
          line-height: .8rem;
          background-color: #ffbb01;
          font-size: .375rem;
          text-align: center;
          border-radius: 999px;
          color: #fff;
        }
      }
    }
  }

  .hot_share {
    margin-top: 0.4688rem;

    .hot_article_list {
      padding: 0.2rem 0.4688rem;

      .hot_article_info {
        margin-top: 0.375rem;
        // padding: .25rem .25rem;
        display: flex;
        background-color: #fff;
        border-radius: .3125rem;

        img {
          margin-top: .4rem;
          margin-left: .38rem;
          width: 5rem;
          height: 2rem;
          background-color: #eee;
        }

        .hot_article_txt {
          padding: 0.4688rem .3125rem;

          h5 {
            font-size: 0.4688rem;
          }

          p {
            margin: 0;
            margin-top: 0.1875rem;
            font-size: 0.4063rem;
            line-height: 0.4688rem;
            color: rgb(187, 187, 187);
          }
        }
      }
    }
  }
}
</style>
